<template>
	<view class="content">
		<!-- 签到 -->
		<view class="all-qiandao" v-show="Qshow"  @tap="hidepopup">
		</view>
		<view class="qiandao" v-show="Qshow">
			<calendar></calendar>
		</view>
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap">
		</swiper-tab-head>
 
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item,index1) in items.list" :key="index1">
								<index-list :item="item" :index="index1"></index-list>
							</block>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="items.loadtext"></load-more>

						</template>
						
						<template v-else>
							<!-- 无内容默认 -->
							<nothing></nothing>
							
						</template>
						
								
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>

		






	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";
	import nothing from "../../components/common/nothing.vue";
	import calendar from '../../components/calendar/Calendar.vue';
	export default {
		data() {
			return {
				Qshow:false,
				swiperheight: 700,
				tabindex: 0,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "推荐",
						id: "tuijian"
					},
					{
						name: "体育",
						id: "tiyu"
					},
					{
						name: "热点",
						id: "redian"
					},
					{
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					}

				],
				
				newslist: [{
						loadtext:"上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/5.jpg",
								username: "帅宝",
								isguanzhu: false,
								title: "吃饭",
								type: "img", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/39.jpg",
								infonum: {
									index: 0, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							},
							{
								userpic: "../../static/demo/userpic/3.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/42.jpg",
								playnum: "20w",
								long: 2.47,

								infonum: {
									index: 1, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							},
							{
								userpic: "../../static/demo/userpic/9.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/47.jpg",
								playnum: "20w",
								long: 2.47,
							
								infonum: {
									index: 1, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},
							
								commentnum: 10,
								sharenum: 10
							
							}
							
						]
					},
					{
						loadtext:"上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/35.jpg",
								infonum: {
									index: 0, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							},
							{
								userpic: "../../static/demo/userpic/7.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/32.jpg",
								playnum: "20w",
								long: 2.47,

								infonum: {
									index: 1, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/17.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/25.jpg",
								infonum: {
									index: 0, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							},
							{
								userpic: "../../static/demo/userpic/16.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", //img，图文，video，视频
								titlepic: "../../static/demo/datapic/28.jpg",
								playnum: "20w",
								long: 2.47,

								infonum: {
									index: 1, //0没有操作，1 已经顶了 2 已经踩了
									dingnum: 11,
									cainum: 11,
								},

								commentnum: 10,
								sharenum: 10

							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					}

				],


			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});

		},
		// 监听搜索框点击事件
		onNavigationBarSearchInputClicked(){
			console.log("搜索")
			uni.navigateTo({
				url:'../search/search'
			})
		},
		// 监听原生标题栏按钮的点击事件
		onNavigationBarButtonTap(e){
			
			switch (e.index){
				case 1:
				// 打开发布页面
				uni.navigateTo({
					url: '../addInput/addInput',
				});
					break;
				case 0:
					this.signshow();
					break;
			}
		},
		
		methods: {
			// 签到点击事件
			signshow(){
				this.Qshow=!this.Qshow;
			},
			hidepopup(){
				this.Qshow=false;
			},

			// 点击事件：获取到点击tab内容的tabindex值，达到内容的切换
			tabtap(index) {
				this.tabindex = index;
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			// 上拉加载更多
			loadmore(index){
				if (this.newslist[index].loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.newslist[index].loadtext="加载中"
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						userpic: "../../static/demo/userpic/15.jpg",
						username: "昵称",
						isguanzhu: true,
						title: "我是标题",
						type: "video", //img，图文，video，视频
						titlepic: "../../static/demo/datapic/23.jpg",
						playnum: "20w",
						long: 2.47,
						infonum: {
							index: 1, //0没有操作，1 已经顶了 2 已经踩了
							dingnum: 11,
							cainum: 11,
						},
						commentnum: 10,
						sharenum: 10
					};
					this.newslist[index].list.push(obj);
					this.newslist[index].loadtext="上拉加载更多";
				}, 1000);
				// this.newslist[index].loadtext="到底了"
			}

		},
		// 组件注册
		components: {
			indexList,
			swiperTabHead, 
			loadMore,
			nothing,
			calendar
			
		}
	} 
</script>

<style scoped>
	.qiandao{
		position: fixed;
		top: 80upx;
		background: #FEDE33;
		z-index: 2000;
	}
	.all-qiandao{
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 1999;
	}
	

</style>
